import React,{Component} from "react";
// 引入唯一标识符库nanoid
import {nanoid} from "nanoid";
// 引入prop-types的库,对props进行类型的限制
import PropTypes from "prop-types"
import "../Header/index.css"
export default class Header extends Component{

    // 必须加上static,对接收的props进行：类型、必要性的限制
    static propTypes =  {
        addTodo:PropTypes.func.isRequired
    }

    // 键盘事件
    handleKeyUp=(event)=> {
        // console.log('ev',event.target.value)
        const {keyCode, target} = event
        if (keyCode !== 13) return
        console.log(target.value)
        if(!target.value) {
            alert('输入不能为空')
            return;
        }

        const todo = {id:nanoid(),name:target.value,done:false}
        this.props.addTodo(todo)
        // 最后要清空输入框的数据
        target.value = ""

    }


    render() {
        return(
            <div className="todo-header">
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        )
    }
}
